<!-- 教学建筑管理 -->

<template>
  <div>
    <div class="add-button">
      <el-button style="width: 15%;" type="primary" @click="addTeachbuild">添加教学楼</el-button>
    </div>
    <!-- 教学楼列表 -->
    <el-table :data="teachBuildData" size="mini" :stripe="true" :highlight-current-row="true">
      <el-table-column label="序号" type="selection"></el-table-column>
      <el-table-column prop="teachBuildNo" label="教学楼编号"></el-table-column>
      <el-table-column prop="teachBuildName" label="教学楼名称"></el-table-column>
      <el-table-column prop="teachBuildLocation" label="所属区域"></el-table-column>

      <el-table-column prop="operation" label="操作">
        <template #default="scope">
          <el-button type="danger" size="mini" @click="deleteById(scope.$index, scope.row)">删除</el-button>
          <el-button type="primary" size="mini" @click="editById(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出表单编辑教学楼 -->
    <el-dialog title="" v-model="visibleForm">
      <el-form :model="editFormData" ref="editFormDataRef" label-position="left" label-width="80px"
               :rules="editFormRules">
        <el-form-item label="编号">
          <el-input v-model="editFormData.teachBuildNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="teachBuildName">
          <el-input v-model="editFormData.teachBuildName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在区域" prop="teachBuildLocation">
          <el-input v-model="editFormData.teachBuildLocation" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visibleForm = false">取 消</el-button>
        <el-button type="primary" @click="commit()">提 交</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <div class="footer-button">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted, getCurrentInstance} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';
import {ElMessage} from "element-plus";

const {proxy} = getCurrentInstance();
const store = useStore();
const router = useRouter();

const teachBuildData = ref([]);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const type = ref(1); // 编辑
const editFormData = ref({
  teachBuildNo: '',
  teachBuildName: '',
  teachBuildLocation: '',
});
const visibleForm = ref(false);
const editFormRules = reactive({
  teachBuildNo: [
    {required: true, message: '请输入教学楼编号', trigger: 'blur'},
  ],
  teachBuildLocation: [
    {required: true, message: '请输入教学楼位置', trigger: 'blur'},
  ],
  teachBuildName: [
    {required: true, message: '请输入教学楼名称', trigger: 'blur'},
  ]
});

onMounted(() => {
  allTeachBuilding();
});

const addTeachbuild = () => {
  type.value = 2; // 添加
  visibleForm.value = true;
  editFormData.value = {};
}

const validateForm = () => {
  return new Promise((resolve) => {
    proxy.$refs.editFormDataRef.validate((valid) => {
      resolve(valid);
    });
  });
};
// 提交更新
const commit = async () => {
  const valid = await validateForm();
  if (!valid) {
    ElMessage.error('请输入对应参数');
    return
  }
  if (type.value === 1) {
    modifyTeachBuild(editFormData.value);
  } else {
    newTeachbuild(editFormData.value);
  }
}

// 添加教学楼
const newTeachbuild = async (modifyData) => {
  await proxy.$api.addTeachBuildInfo(modifyData);
  ElMessage({message: "添加成功", type: "success"});
  allTeachBuilding();
  visibleForm.value = false;
}

const deleteById = async (index, row) => {
  await proxy.$api.deleteTeachBuildingById(row.id);
  ElMessage({message: "删除成功", type: "success"});
  allTeachBuilding();
}

const editById = (index, row) => {
  let modifyId = row.id;
  visibleForm.value = true;
  editFormData.value = row;
  type.value = 1; // 编辑
}

function handleSizeChange() {
}

function handleCurrentChange(v) {
  page.value = v;
  allTeachBuilding();
}

// 获取所有教学楼
const allTeachBuilding = async () => {
  const result = await proxy.$api.allTeachBuildInfo(page.value);
  teachBuildData.value = result.records;
  total.value = result.total;
}

// 更新教学楼
const modifyTeachBuild = async (modifyData) => {
  await proxy.$api.modifyTeachBuildInfo(modifyData.id, modifyData);
  ElMessage({message: "更新成功", type: "success"});
  allTeachBuilding();
  visibleForm.value = false;
}

// 删除教学楼
const deleteTeachBuildingById = async (id) => {
  await proxy.$api.deleteTeachBuildingById(id)
  this.$message({message: "更新成功", type: "success"})
  allTeachBuilding()
  visibleForm.value = false
}
</script>

<style lang="less" scoped>
.footer-button {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

.add-button {
  margin-bottom: 5px;
  text-align: left;
}
</style>
